﻿
    var espacioB = 35,//espacio entre barras
	 	anchoB = 20, //ancho de las barras
	    alturaC = 120,
		nEtiquetasY = 4, //escala
		offsetX = 10, //posicion Vertical
		anchoG = 500, //Ancho de Canvas, es decir, el grafico
		alturaG = 200; // Alto de Canvas, es decir, el grafico

    var maxVal,
		valoresG = [],
	    etiquetasX = [],
		etiquetasY = [];

    var cv, ctx;

    function obtenerValores(Valores) {
        // Valores   
        for (index = 0; index < Valores.length; index++) {
            valoresG.push(Valores[index].Y);
        }

        //Etiquetas   
        for (index = 0; index < Valores.length; index++) {
            etiquetasX.push(Valores[index].X);
            
        }

    }

    function initCanvas() {

        cv = $("#canvas").get(0);
        if (!cv)
        { return; }

        ctx = cv.getContext('2d');
        if (!ctx)
        { return; }
    }

    function valorMaximo(arr) {
        maxVal = 0;

        for (i = 0; i < arr.length; i++) {
            if (maxVal < parseInt(arr[i])) {
                maxVal = parseInt(arr[i]);
            }
        }

        //maxVal *= 1.1;
        maxVal = 100;
    }

    function escalar(param) {
        return Math.round((param / maxVal) * alturaC);
    }

    function x(param) {
        return (param * anchoB) + ((param + 1) * espacioB) + offsetX;
    }

    function y(param) {
        return alturaC - escalar(param);
    }

    function ancho() {
        return anchoB;
    }

    function altura(param) {
        return escalar(param);
    }

    function dibujarEtiquetasX() {
        ctx.save();
        ctx.font = "8px 'arial'";
        ctx.fillStyle = "#000";
        for (index = 0; index < etiquetasX.length; index++) {
            ctx.fillText(etiquetasX[index], x(index), alturaC + 10);
        }
        ctx.restore();
    }

    function dibujarEtiquetasY() {
        ctx.save();
        for (index = 0; index < nEtiquetasY; index++) {
            etiquetasY.push(Math.round(maxVal / nEtiquetasY * (index + 1)));
            ctx.fillStyle = "#000";
            ctx.fillText(etiquetasY[index], offsetX, y(etiquetasY[index]) + 8);
        }
        ctx.translate(alturaC - 20, 0);
        ctx.rotate(-Math.PI / 2);
        //ctx.rotate((Math.PI / 180) * 90);
        ctx.fillText("%", 0, alturaC-20 );
        ctx.restore();

        /*context.save();
        context.textAlign = "center";
        context.fillText("Your Label Here", labelXposition, 0);
        context.restore();*/

    }

    function dibujarGraficoBarras() {
        for (index = 0; index < valoresG.length; index++) {
            ctx.save();
            ctx.fillStyle = "#B7B7B7";
            ctx.fillRect(x(index), y(valoresG[index]), ancho(), altura(valoresG[index]));
            ctx.restore();
        }
        
    }





    function GenerarGraficos(Valores, AlturaCanvas, AnchoCanvas) {
        obtenerValores(Valores);
        anchoG = AnchoCanvas;
        alturaG = AlturaCanvas;
        alturaC = AlturaCanvas - 10
        initCanvas();
        valorMaximo(valoresG);
        dibujarEtiquetasX();
        dibujarEtiquetasY();
        dibujarGraficoBarras();

    }

    
